<template>
  <div id="viedeoWorkUserInfo">
    <div class="img-list-box">
      <!--生活小视频，展示视频-->
      <videoFace :vid="item.vid"></videoFace>
    </div>
    <div class="info-right">
      <dl class="info-header">
        <dt>
          <el-image :src="item.user.avatar" fit="fill"></el-image>
        </dt>
        <dd>
          <span class="nike-name">
            {{ item.user.name }}
          </span>
          <!--此处插槽，用来添加其他tag标签-->
          <slot name="infoTag"></slot>
          <!--展示方式-->
          <el-tag v-if="item.displayRule" type="success" effect="dark">
            {{ item.displayRule | filterName('displayRule') }}
          </el-tag>
          <!--马甲 \ 用户-->
          <el-tag type="success" effect="dark">
            {{ item.userType | filterName('lifeUserPro') }}
          </el-tag>
          <el-popover
            v-if="showUp"
            v-model="visible"
            placement="bottom"
            width="180"
            trigger="manual"
          >
            <p class="pop-con" v-html="upCon"></p>
            <el-button slot="reference" @click="addPraiseSpeed('1')">
              加赞进度
            </el-button>
          </el-popover>
          <el-popover
            v-if="showUpTimeIng"
            v-model="visibleTimeIng"
            placement="bottom"
            width="180"
            trigger="manual"
          >
            <p class="pop-con" v-html="upContentIng"></p>
            <el-button slot="reference" @click="addPraiseSpeed('2')">
              限时批量加赞中
            </el-button>
          </el-popover>
          <el-popover
            v-if="showUpTime"
            v-model="visibleTime"
            placement="bottom"
            width="250"
            trigger="manual"
          >
            <p class="pop-con" v-html="upContent"></p>
            <el-button slot="reference" @click="addPraiseSpeed('3')">
              限时批量加赞
            </el-button>
          </el-popover>
        </dd>
        <dd>
          <span class="nick-code">{{ item.user.dpAccount }}</span>
          <span class="nick-code">创建时间：{{ item.submitTime }}</span>
        </dd>
      </dl>
      <div v-if="item.type === 'VIDEO'" class="info-video">
        VID:{{ item.vid }}
      </div>
      <div class="info-content">
        <span v-html="filterContent(item.content)"></span>
      </div>
      // 前面帖子维护后面马甲
      <ul class="foot-list">
        <li
          v-permission="
            `wh:system:${
              from === 'lifeMine' ? 'lifeVideoMyRelease' : 'lifeVideo'
            }:comment`
          "
          class="pointer"
          @click="
            changeView(
              from === 'lifeMine'
                ? 'wh:videoManagement:commonLife:commentList:videoLifeCommentList'
                : 'wh:videoLifeComment:list'
            )
          "
        >
          评论 {{ item.commentCount }}
        </li>
        <li
          v-permission="
            `wh:system:${
              from === 'lifeMine' ? 'lifeVideoMyRelease' : 'lifeVideo'
            }:praise`
          "
          class="pointer"
          @click="
            changeView('wh:videoManagement:commonLife:upList:videoLifeUpList')
          "
        >
          点赞 {{ item.likeCount }}
        </li>
        <li
          v-permission="
            `wh:system:${
              from === 'lifeMine' ? 'lifeVideoMyRelease' : 'lifeVideo'
            }:share`
          "
          class="pointer"
          @click="showDialogNum('share')"
        >
          虚拟分享量 {{ item.virtualShareAmount }}
        </li>
        <li>真实分享量 {{ item.shareCount }}</li>
        <template
          v-permission="
            `wh:system:${
              from === 'lifeMine' ? 'lifeVideoMyRelease' : 'lifeVideo'
            }:virtualPlay`
          "
        >
          <li
            v-if="item.type === 'VIDEO'"
            class="pointer"
            @click="showDialogNum('video')"
          >
            虚拟播放量 {{ item.virtualPlayNum }}
          </li>
        </template>
        <li v-if="item.type === 'VIDEO'">真实播放量 {{ item.playNum }}</li>
        <li class="canClick" @click="getEditor">最新编辑者 {{ editor }}</li>
        <li
          v-if="!item.deleted && item.type === 'VIDEO'"
          class="canClick"
          @click="getAuditStatus"
        >
          审核状态 {{ auditStatus }}
        </li>
        <li v-if="item.deleted">删除理由：{{ showRes }}</li>
      </ul>
      <!--隐性标签-->
      <hideLabel
        v-permission="
          `wh:system:${
            from === 'lifeMine' ? 'lifeVideoMyRelease' : 'lifeVideo'
          }:label`
        "
        :hideLabelObj="hideLabelObj"
        :user="item.user"
        :labels="item.labels"
        :labelList="labelList"
        :labelListTotal="labelListTotal"
        v-if="showHideLabel"
      ></hideLabel>
    </div>
    <dialogNum
      v-if="dialogNumData.isShow"
      :dialog-data="dialogNumData"
      @changeNum="changeNum"
      @changePlayNum="changePlayNum"
    ></dialogNum>
  </div>
</template>

<script>
import { editor, changeShare, changePlay } from '@/api/videoManagement/life' // 接口
import { contentToStr } from '@utils/pubFunction'
import videoFace from '@common/videoFace'
import dialogNum from '@common/dialogNum' // 虚拟分享量/虚拟播放量-弹窗
import hideLabel from '@common/hideLabel/index' //  隐性标签
import {
  sysNormalDisable,
  getStatusCode,
  getDelCode
} from '@utils/dictionariesFunc'
import { praiseSpeed } from '@/api/common/likesAPI'
export default {
  name: 'WorkUserInfo',
  msg: '小视频管理-生活小视频-小视频维护/我的发布-用户主要信息',
  components: {
    videoFace,
    dialogNum,
    hideLabel
  },
  props: ['item', 'index', 'from', 'powerAry', 'labelList', 'labelListTotal'], // from-"lifeMine"(我的发布)/"lifePre"(小视频维护)
  data() {
    return {
      categoryType: 8, // 1.社团 2.活动 3.作品 4.作业 5.回放视频 8.生活
      editor: '', // 最新编辑者
      auditStatus: '', // 审核状态
      showRes: '', //删除原因
      dialogNumData: {
        // 虚拟分享量/虚拟播放量
        isShow: false, // 默认隐藏
        type: '',
        num: 0,
        params: '' // 编辑时，传递的参数
      },
      upCon: '', // 加赞进度
      upContentIng: '', // 限时批量加赞中
      upContent: '', // 限时批量加赞
      visible: false, // 激活显示内容-加赞进度
      visibleTimeIng: false, // 激活显示内容-限时批量加赞中
      visibleTime: false, // 激活显示内容-限时批量加赞
      showUp: false, // 是否显示加赞进度
      showUpTimeIng: false, // 是否显示限时批量加赞中
      showUpTime: false, // 是否显示限时批量加赞
      showHideLabel: false, //是否显示隐性标签
      hideLabelObj: {} //是否显示隐性标签
    }
  },
  computed: {
    listenshowUp() {
      return this.$store.state.praiseSpeed[
        `lifeVideo_${this.from}_up_${this.index}`
      ]
    },
    listenshowUpTime() {
      return this.$store.state.praiseSpeed[
        `lifeVideo_${this.from}_UpTime_${this.index}`
      ]
    }
  },
  watch: {
    listenshowUp(newV, oldV) {
      if (newV) {
        this.showUp = true
      } else {
        this.showUp = false
      }
    },
    listenshowUpTime(newV, oldV) {
      if (newV) {
        this.showUpTime = true
      } else {
        this.showUpTime = false
      }
    }
  },
  mounted() {
    this.setShowUpBtn()
    if (this.item.deleted) {
      this.getReason(this.item.reason, this.item.vid)
    }
    this.getLabelShowStatu()
  },
  methods: {
    /* 过滤返回内容 */
    filterContent(item) {
      return contentToStr(item)
    },
    /*隐性标签是否显示*/
    getLabelShowStatu() {
      let isShow = this.$parent.$parent.showComment(this.item)
      // let power = this.powerAry.includes(
      //   `system:${
      //     this.from === 'lifeMine' ? 'lifeVideoMyRelease' : 'lifeVideo'
      //   }:label`
      // )
      // this.showHideLabel = isShow && power
      this.showHideLabel = isShow
      if (this.showHideLabel) {
        //整合obj
        let {
          activityId,
          checkStatu: auditStatu,
          collegeId: collegeId,
          plainText: content,
          id: contentId,
          submitTime: createDate,
          displayRule,
          imgInfo: images,
          type: type,
          whOperator: operatorId,
          userType: userProperty,
          user: { id: userId },
          vid: videoId
        } = this.item

        this.hideLabelObj = {
          activityId, //活动id
          auditStatu, //人审状态 PASS通过 / UNCHECKED未审核
          collegeId, //学院id
          content, //内容
          contentId, //内容id
          createDate, //创建时间
          displayRule, //展示规则 ALL公开展示 / PERSONAL仅主页可见
          images, //图片
          type, //内容类型：图文/视频,可用值:TEXT,VIDEO
          operatorId, //运营人id
          userProperty, //马甲、用户,可用值:REALUSER,VEST
          userId, //发帖人id
          videoId, //保利威视vid
          channel: 'LIFE' //频道,可用值:JOB,LIFE,WORK,GROW,ACTIVITY,ARTICLE,SHORT_VIDEO,LONG_VIDEO
        }
        /*console.log(this.hideLabelObj)*/
      }
    },
    /* 判断加赞按钮显示隐藏 */
    setShowUpBtn() {
      if (this.item.robotPraise != null) {
        // 普通点赞状态
        if (this.item.robotPraise.taskList != null) {
          if (this.item.robotPraise.taskList.length > 0) {
            // 加赞进度
            this.showUp = true // 加赞进度
          }
        }
        if (
          this.item.robotPraise.executionTask != null ||
          this.item.robotPraise.unExecutionTask != null
        ) {
          if (this.item.robotPraise.executionTask.length > 0) {
            // 限时批量加赞中
            this.showUpTimeIng = true // 限时批量加赞中
          } else if (this.item.robotPraise.unExecutionTask.length > 0) {
            // 限时批量加赞
            this.showUpTime = true // 限时批量加赞
          }
        }
      }
    },
    /* 显示加赞进度 */
    async addPraiseSpeed(type) {
      let obj = {
        topicId: this.item.id,
        topicCreatedBy: this.item.user.id,
        categoryType: this.categoryType
      }
      let data = await praiseSpeed(obj)
      switch (type) {
        case '1': // 加赞进度
          this.showUpCon(data.taskList, 'visible', 'upCon', '')
          break
        case '2': // 限时批量加赞中
          this.showUpCon(
            data.executionTask,
            'visibleTimeIng',
            'upContentIng',
            ''
          )
          break
        case '3': // 限时批量加赞
          this.showUpCon(
            data.unExecutionTask,
            'visibleTime',
            'upContent',
            'addDate'
          )
          break
      }
    },
    /* 设置当前显示点赞内容 */
    showUpCon(targetDate, targetVisible, targetCon, type = '') {
      let _this = this
      _this[targetCon] = ''
      this[targetVisible] = true
      let curData = targetDate
      if (curData.length > 0) {
        curData.forEach((item, index) => {
          if (index > 0) {
            _this[targetCon] += `<br/>`
          }
          _this[
            targetCon
          ] += `${item.number}/${item.total}  ${item.operateUser.nickName}`
          if (type) {
            _this[targetCon] += `--- ${item.startDate}`
          }
        })
      } else {
        _this[targetCon] = '暂无加赞进度'
      }
      setTimeout(() => {
        this[targetVisible] = false
      }, 2000)
    },
    /* 获取最新编辑者 */
    getEditor() {
      editor(this.item.id, (response) => {
        let e = response || ' -'
        this.editor = ':' + e
      })
    },
    /* 获取审核状态 */
    async getAuditStatus() {
      let obj = {
        topicId: this.item.id,
        topicType: 'LIFE',
        userId: this.item.user.id,
        delStatu: this.item.deleted ? 'Y' : 'N',
        polyvStatu: this.item.polyvStatu
      }
      let code = await getStatusCode(this.item.vid, obj)
      code = code.toString()
      let ary = await sysNormalDisable('poly_status')
      let cur = ary.find((item) => item.dictValue === code)
      this.auditStatus = ': ' + cur.dictLabel
    },
    /* 字符串转为数组 */
    strToAry(str) {
      return str.split(',')
    },
    /* 显示-虚拟分享量/虚拟播放量-弹窗 */
    showDialogNum(type) {
      this.dialogNumData.type = type
      this.dialogNumData.isShow = true
    },
    /* 跳转页面 */
    changeView(name) {
      let id = this.item.id
      let from = this.from
      let query = {
        from,
        id
      }
      this.$router.push({ name, query })
    },
    /*关闭虚拟分享量/播放量弹窗*/
    closeDialog() {
      this.dialogNumData.isShow = false
      this.dialogNumData.type = ''
    },
    /* 修改虚拟分享量 */
    changeNum(n) {
      let obj = {
        shareCount: n
      }
      changeShare(
        this.item.id,
        obj,
        (response) => {
          this.$message.success('操作成功')
          this.closeDialog()
          this.item.virtualShareAmount = n
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    },
    /* 修改虚拟播放量 */
    changePlayNum(n) {
      let url = `/life-videos/${this.item.id}/play-counts`
      let obj = {
        playCount: n
      }
      changePlay(
        this.item.id,
        obj,
        (response) => {
          this.$message.success('操作成功')
          this.closeDialog()
          this.item.virtualPlayNum = n
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    },
    /*获取删除理由*/
    async getReason(res, vid) {
      let polivRes = '保利威视审核不通过'
      if (res === polivRes) {
        let cur = await getDelCode(vid)
        this.showRes = cur ? cur : polivRes
      } else {
        this.showRes = res
      }
    }
  }
}
</script>

<style lang="less">
#viedeoWorkUserInfo {
  display: flex;
  justify-content: left;

  .img-list-box {
    width: 285px;
    height: 270px;
    margin-right: 55px;
    flex: none;
  }

  .info-right {
    flex: auto;
    position: relative;
    padding: 0 20px 40px 0;

    dl {
      font-size: 14px !important;

      &.info-header {
        color: #666;

        dt {
          width: 50px;
          margin-right: 20px;
          float: left;

          .el-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }

          span.name {
            display: block;
            width: 100%;
            line-height: 20px;
            text-align: center;
            font-size: 14px;
            color: #333;
            padding: 5px 0;
          }
        }

        dd {
          margin-left: 80px;
          padding-bottom: 10px;

          .nike-name {
            margin-right: 30px;
          }

          .el-tag {
            margin-right: 8px;
            height: 24px;
            line-height: 22px;
          }

          .nick-code {
            margin-right: 15px;
          }

          button.el-button.el-button--default.el-popover__reference {
            background: #ff8c00;
            border: 1px solid #ff8c00;
            color: #fff;
            padding: 4px 10px;
            margin-right: 8px;
          }
        }
      }

      &.info-con {
        clear: both;
        padding-top: 15px;
        color: #333;

        dd {
          padding-bottom: 20px;

          a {
            color: #333;

            &:hover {
              color: #666;
            }
          }
        }
      }
    }
    .info-content {
      font-size: 14px;
      color: #666;
      word-break: break-all;
      img {
        max-width: 100%;
      }
    }
    .info-video {
      padding-bottom: 10px;
      font-size: 16px;
      color: #333;
    }
    ul.foot-list {
      position: absolute;
      bottom: 0;
      padding: 20px 0 15px;
      overflow: hidden;
      color: #999;
      font-size: 16px;

      li {
        float: left;
        margin-right: 20px;
        line-height: 28px;
        &.pointer {
          cursor: pointer;
        }
      }
    }
  }
  .canClick {
    cursor: pointer;
  }
}
</style>
